<template>
  <div>
    <div class="header">
      <v-header :seller="seller"></v-header>
    </div>
    <div class="tab ">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/sellers">商家</router-link>
      </div>
    </div>
    <mt-button @click.native="startHacking">Let's do it</mt-button>
    <input type="file" accept="image/*">
    <mt-button
      type="primary"
      @click="sheetVisible = true">
      选择操作
    </mt-button>
    <mt-actionsheet
      :actions="actions"
      :visible.sync="true">
    </mt-actionsheet>
    <router-view>
    </router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import  header from "./components/header/header.vue"
  import  goods from "./components/goods/goods.vue"
  import  seller from "./components/seller/sellers.vue"
  import  ratings from "./components/ratings/ratings.vue"



  const ERROR_OK = 0;
  export default{
    components: {
      'v-header': header,
    },
    data() {
      return {
        seller: {},
        sheetVisible: false,
        actions: [{
          name: '展示 Toast',
          method: this.startHacking
        }, {
          name: '展示 Message Box',
          method: this.showMsgbox
        }]
      }
    },
    created() {
      this.$http.get('/api/seller').then((response) => {
        response = response.body;
        if (response.errno === ERROR_OK) {
          this.seller = response.data;
        }
      })

    },
    methods: {
      startHacking () {
        this.$toast({
          message: '操作成功',
          iconClass: 'icon icon-success'
        });
      },
      showMsgbox() {
        MessageBox('提示', '这是一个 Message Box');
      }
    }
  };


</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "common/stylus/mixin.styl"
  .tab
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-1px(rgba(7, 17, 27, 0.1));
    .tab-item
      flex: 1;
      text-align: center;
      & > a
        display: block
        font-size: 14px
        color: rgb(77, 85, 93)
        &.active
          color: rgb(240, 30, 30)
</style>
